<template>
	<view class="page-container">
		<!-- 蓝色背景区域 -->
		<view class="header-bg">
			<!-- 分段控制器（uni-ui） -->
			<view class="segmented-bar">
				<uni-segmented-control class="div" :values="items" :current="current" style-type="text" :active-color="'#FFFFFF'"
					 @clickItem="onClickItem" />
			</view>
		</view>

		<!-- 悬浮内容区域 -->
		<view class="content-container">
			<!-- 待使用（图片1） -->
			<view v-if="current === 0" class="coupon-list">
				<view v-for="(coupon, index) in unusedCoupons" :key="'u-' + index" class="coupon-card">
					<image src="/static/images/xtx/优惠券.png" class="coupon-bg" mode="aspectFill" />
					<view class="coupon-content">
						<view class="coupon-info">
							<text class="usage-limit">{{ coupon.limit }}</text>
							<text class="usage-condition">{{ coupon.condition }}</text>
							<text class="validity-period">{{ coupon.validity }}</text>
						</view>
						<view class="coupon-right">
							<view class="coupon-amount">
								<text class="amount-symbol">¥</text>
								<text class="amount-value">{{ coupon.amount }}</text>
							</view>
							<view class="coupon-status">
								<text class="status-text">去使用</text>
								<text class="arrow-icon">></text>
							</view>
						</view>
						<view class="coupon-divider"></view>
					</view>
				</view>
			</view>

			<!-- 已使用（图片2） -->
			<view v-else-if="current === 1" class="coupon-list">
				<view v-for="(coupon, index) in usedCoupons" :key="'used-' + index" class="coupon-card used">
					<image src="/static/images/xtx/优惠券已使用.png" class="coupon-bg" mode="aspectFill" />
					<view class="coupon-content">
						<view class="coupon-info">
							<text class="usage-limit">{{ coupon.limit }}</text>
							<text class="usage-condition">{{ coupon.condition }}</text>
							<text class="validity-period">{{ coupon.validity }}</text>
						</view>
						<view class="coupon-right">
							<view class="coupon-amount">
								<text class="amount-symbol">¥</text>
								<text class="amount-value">{{ coupon.amount }}</text>
							</view>
							<view class="coupon-status">
								<text class="status-text">已使用</text>
								<text class="arrow-icon">></text>
							</view>
						</view>
						<view class="coupon-divider"></view>
					</view>
				</view>
			</view>

			<!-- 已过期（图片3：此处沿用底图并置灰文案样式） -->
			<view v-else class="coupon-list">
				<view v-for="(coupon, index) in expiredCoupons" :key="'e-' + index" class="coupon-card expired">
					<image src="/static/images/xtx/已过期.png" class="coupon-bg" mode="aspectFill" />
					<view class="coupon-content">
						<view class="coupon-info">
							<text class="usage-limit">{{ coupon.limit }}</text>
							<text class="usage-condition">{{ coupon.condition }}</text>
							<text class="validity-period">{{ coupon.validity }}</text>
						</view>
						<view class="coupon-right">
							<view class="coupon-amount">
								<text class="amount-symbol">¥</text>
								<text class="amount-value">{{ coupon.amount }}</text>
							</view>
							<view class="coupon-status">
								<text class="status-text">已过期</text>
								<text class="arrow-icon">></text>
							</view>
						</view>
						<view class="coupon-divider"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分段器
				items: ['待使用', '已使用', '已过期'],
				current: 0,
				// 待使用优惠券
				unusedCoupons: [{
						id: 1,
						amount: 20,
						condition: '满200元可用',
						limit: '仅限于XX加油站使用',
						validity: '有效期至: 2020.04.11—2023.05.11',
					},
					{
						id: 2,
						amount: 50,
						condition: '满500元可用',
						limit: '仅限于XX加油站使用',
						validity: '有效期至: 2020.04.11—2023.05.11',
					},
					{
						id: 3,
						amount: 25,
						condition: '满300元可用',
						limit: '仅限于XX加油站使用',
						validity: '有效期至: 2020.04.11—2023.05.11',
					},
				],
				// 已使用优惠券
				usedCoupons: [{
						id: 4,
						amount: 20,
						condition: '满200元可用',
						limit: '仅限于XX加油站使用',
						validity: '有效期至: 2020.04.11—2023.05.11',
					},
					{
						id: 5,
						amount: 30,
						condition: '满300元可用',
						limit: '仅限于XX加油站使用',
						validity: '有效期至: 2020.04.11—2023.05.11',
					},
				],
				// 已过期优惠券
				expiredCoupons: [{
						id: 6,
						amount: 20,
						condition: '满200元可用',
						limit: '仅限于XX加油站使用',
						validity: '有效期至: 2020.04.11—2023.05.11',
					},
					{
						id: 7,
						amount: 40,
						condition: '满400元可用',
						limit: '仅限于XX加油站使用',
						validity: '有效期至: 2020.04.11—2023.05.11',
					},
					{
						id: 8,
						amount: 60,
						condition: '满600元可用',
						limit: '仅限于XX加油站使用',
						validity: '有效期至: 2020.04.11—2023.05.11',
					},
				],
			};
		},
		onLoad() {
			this.loadCouponData();
		},
		methods: {
			// 加载优惠券数据
			loadCouponData() {
				// 这里应该调用接口获取优惠券数据
				// 暂时使用模拟数据
			},
			// 分段器点击事件
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
		},
	};
</script>

<style scoped>
	.page-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 蓝色背景区域 */
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background: linear-gradient(135deg, #3385fd 0%, #3385fd 100%);
		z-index: 1;
		display: flex;
		justify-content: center;
	}

	/* 分段控制器容器，让内部元素横向撑满屏幕 */
	.segmented-bar {
		width: 100%;
		display: flex;
		padding: 0 10rpx;
		justify-content: center;
		/* 增加左右内边距，让分段器更紧凑 */
	}

	/* 分段器的每一项，设置为弹性布局且均匀分布，有合适间隔 */
	::v-deep .uni-segmented-control {
		display: flex;
		width: 100%;
		background-color: transparent;
		/* 确保背景透明 */
		border: none;
		/* 去除边框 */
	}

	::v-deep .uni-segmented-control__item {
		flex: 1;
		text-align: center;
		position: relative;
		/* 为下划线定位做准备 */
		padding: 10rpx 0;
		/* 增加上下内边距，让点击区域更大 */
	}

	/* 文字样式，未选中时的状态 */
	::v-deep .uni-segmented-control__text {
		color: #ffffff;
		font-size: 38rpx;
		font-weight: 700;
	}

	/* 选中项的文字样式，这里不需要额外改变，保持和未选中一致即可 */
	::v-deep .uni-segmented-control--text .uni-segmented-control__item.is-active .uni-segmented-control__text {
		/* 可根据需要添加字体加粗等，若不需要可留空 */
	}

	/* 选中项下划线样式 */
	::v-deep .uni-segmented-control--text .uni-segmented-control__item.is-active::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 10rpx;
		/* 调整下划线位置，更靠下 */
		transform: translateX(-50%);
		width: 60%;
		/* 下划线宽度，可根据需要调整 */
		height: 6rpx;
		/* 增加下划线高度 */
		background-color: #ffffff;
		border-radius: 3rpx;
		/* 下划线圆角 */
	}

	/* 悬浮内容区域 */
	.content-container {
		position: absolute;
		top: 88rpx;
		left: 3%;
		right: 3%;
		width: 86%;
		background-color: #ffffff;
		border-radius: 20rpx;
		z-index: 2;
		padding: 40rpx 30rpx;
		min-height: 600rpx;
	}

	/* 优惠券列表 */
	.coupon-list {
		width: 100%;
	}

	/* 优惠券卡片 */
	.coupon-card {
		position: relative;
		margin-bottom: 28rpx;
		height: 200rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	/* 优惠券背景图片 */
	.coupon-bg {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	/* 优惠券中部虚线（有效期上方） */
	.coupon-divider {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 118rpx;
		height: 0;
		border-bottom: 2rpx dashed rgba(255, 255, 255, 0.95);
	}

	/* 优惠券内容 */
	.coupon-content {
		display: flex;
		align-items: center;
		padding: 0 25rpx 60rpx 38rpx;
		position: relative;
		z-index: 2;
		height: 100%;
	}

	/* 左侧信息区域 */
	.coupon-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-right: 10rpx;
	}

	.usage-limit {
		margin-top: -25rpx;
		font-size: 20rpx;
		color: #ffffff;
		margin-top: 20rpx;
	}

	.usage-condition {
		font-size: 35rpx;
		color: #ffffff;
		font-weight: bold;
		margin-top: 15rpx;
	}

	.validity-period {
		font-size: 22rpx;
		color: #ffffff;
		opacity: 0.8;
		margin-top: 35rpx;
	}

	/* 右侧金额和状态区域 */
	.coupon-right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 金额区域 */
	.coupon-amount {
		display: flex;
		align-items: baseline;
		margin-bottom: 20rpx;
	}

	.amount-symbol {
		font-size: 32rpx;
		color: #ffffff;
		margin-right: 4rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
	}

	.amount-value {
		font-size: 68rpx;
		color: #ffffff;
		font-weight: bold;
		line-height: 1;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
		position: relative;
	}

	/* 已过期金额横向实线（只改变这一处差异） */
	.coupon-card.expired .amount-value::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 52%;
		transform: translateY(-50%);
		height: 7rpx;
		background: #ffffff;
	}

	/* 状态区域 */
	.coupon-status {
		display: flex;
		align-items: center;
	}

	.status-text {
		font-size: 23rpx;
		color: #ffffff;
		margin-right: 8rpx;
		margin-bottom: -55rpx;
	}

	.arrow-icon {
		font-size: 30rpx;
		color: #ffffff;
		margin-bottom: -50rpx;
	}
	.div{
		width: 100%;
		color: #ffffff;
	}
</style>